<template>
  <div class="right-menu-con">
    <div
      class="menu-item"
      :style="{
        backgroundImage: `url(${item.isActive ? item.icon_active : item.icon})`,
      }"
      v-for="(item, index) in menuList[currentMenuType][btntype]"
      :key="index"
      @click="doShowPopup(item, index)"
    >
      <span :class="{ 'span-active-text': item.isActive }">{{
        item.text
      }}</span>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
export default {
  name: "RightMenu",
  computed: {
    // maptype() {
    //   let mapType = this.$store.getters.maptype;

    //   return mapType;
    // },
    // btntype() {
    //   return this.$store.getters.btntype;
  
    // },
  },
  props: {
    btntype: {
      default: () => 2,
    },
  
  },
  mounted() {
    //监听供水一张图一级菜单
    Bus.$on(this.GLOBAL.GONGSHUIONEMAP, (item) => {
      this.doSetMenuType(item);
    });
    //监听统计分析一级菜单
    Bus.$on(this.GLOBAL.TONGJIANALYSIS, (item) => {
      this.doSetMenuType(item);
    });
    Bus.$on("dosetmethodes", (e) => {
      this.resetSubMenuStatus();
    });
  },
  data() {
    return {
      currentMenuType: this.GLOBAL.GONGSHUIONEMAP,
      menuList: {
        [this.GLOBAL.GONGSHUIONEMAP]: {
          3: [
            {
              text: "信息查询",
              isActive: false,
              value: this.GLOBAL.QUERYINFO,
              icon: require("@/assets/rightMenu/XXCX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/XXCX-check.png"),
            },
            {
              text: "爆管预演",
              isActive: false,
              value: this.GLOBAL.BAOGUAN,
              icon: require("@/assets/rightMenu/BGFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/BGFX-check.png"),
            },
            {
              text: "连通分析",
              isActive: false,
              value: this.GLOBAL.LIANTONG,
              icon: require("@/assets/rightMenu/LTFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/LTFX-check.png"),
            },
            // {
            //     text: '纵断面分析',
            //     isActive: false,
            //     value: this.GLOBAL.ZONGDUANMIAN,
            //     icon: require("@/assets/rightMenu/menu-bg-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/menu-bg-checked.png")
            // },
            // {
            //     text: '检修分析',
            //     isActive: false,
            //     value: this.GLOBAL.JIANXIU,
            //     icon: require("@/assets/rightMenu/menu-bg-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/menu-bg-checked.png")
            // },
            {
              text: "开挖分析",
              isActive: false,
              value: this.GLOBAL.KAIWA,
              icon: require("@/assets/rightMenu/KWFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/KWFX-check.png"),
            },
            {
              text: "关阀分析",
              isActive: false,
              value: this.GLOBAL.GUANFA,
              icon: require("@/assets/rightMenu/GFFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/GFFX-check.png"),
            },
          ],
          2: [
            {
              text: "信息查询",
              isActive: false,
              value: this.GLOBAL.QUERYINFO,
              icon: require("@/assets/rightMenu/XXCX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/XXCX-check.png"),
            },
            {
              text: "爆管预演",
              isActive: false,
              value: this.GLOBAL.BAOGUAN,
              icon: require("@/assets/rightMenu/BGFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/BGFX-check.png"),
            },
            {
              text: "连通分析",
              isActive: false,
              value: this.GLOBAL.LIANTONG,
              icon: require("@/assets/rightMenu/LTFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/LTFX-check.png"),
            },
            // {
            //     text: '纵断面分析',
            //     isActive: false,
            //     value: this.GLOBAL.ZONGDUANMIAN,
            //     icon: require("@/assets/rightMenu/menu-bg-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/menu-bg-checked.png")
            // },
            // {
            //     text: '检修分析',
            //     isActive: false,
            //     value: this.GLOBAL.JIANXIU,
            //     icon: require("@/assets/rightMenu/menu-bg-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/menu-bg-checked.png")
            // },
            {
              text: "关阀分析",
              isActive: false,
              value: this.GLOBAL.GUANFA,
              icon: require("@/assets/rightMenu/GFFX-uncheck.png"),
              icon_active: require("@/assets/rightMenu/GFFX-check.png"),
            },
          ],
        },
        [this.GLOBAL.TONGJIANALYSIS]: {
          3: [
            {
              text: "供水总览",
              isActive: false,
              value: this.GLOBAL.GONGSHUIZONGLAN,
              icon: require("@/assets/rightMenu/GSZL-uncheck.png"),
              icon_active: require("@/assets/rightMenu/GSZL.png"),
            },
            {
              text: "预警统计",
              isActive: false,
              value: this.GLOBAL.YUJINGTONGJI,
              icon: require("@/assets/rightMenu/YJTJ-uncheck.png"),
              icon_active: require("@/assets/rightMenu/YJTJ.png"),
            },
            // {
            //     text: '自定义查询',
            //     isActive: false,
            //     value: this.GLOBAL.ZIDINGYICHAXUN,
            //     icon: require("@/assets/rightMenu/ZDYCX-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/ZDYCX.png")

            // }
          ],
          2: [
            {
              text: "供水总览",
              isActive: false,
              value: this.GLOBAL.GONGSHUIZONGLAN,
              icon: require("@/assets/rightMenu/GSZL-uncheck.png"),
              icon_active: require("@/assets/rightMenu/GSZL.png"),
            },
            {
              text: "预警统计",
              isActive: false,
              value: this.GLOBAL.YUJINGTONGJI,
              icon: require("@/assets/rightMenu/YJTJ-uncheck.png"),
              icon_active: require("@/assets/rightMenu/YJTJ.png"),
            },
            // {
            //     text: '自定义查询',
            //     isActive: false,
            //     value: this.GLOBAL.ZIDINGYICHAXUN,
            //     icon: require("@/assets/rightMenu/ZDYCX-uncheck.png"),
            //     icon_active: require("@/assets/rightMenu/ZDYCX.png")
            // }
          ],
        },
      },
    };
  },
  methods: {
    /**
     * 点击右侧菜单，出现功能弹框
     * @param {*} item
     * @param {*} index
     */
    doShowPopup(item, index) {
      // console.log(item, index)
      this.menuList[this.currentMenuType][this.btntype].map((item, key) => {
        if (index == key) {
          item.isActive = !item.isActive;
          // console.log(item)
          // this.$store.commit("changemapstatus", item.isActive)
        } else {
          item.isActive = false;
          // this.$store.commit("changemapstatus", item.isActive)
        }
      });
      if (!item.value) {
        return;
      }
   

      if (item.text != "信息查询") {
        this.$store.commit("changemapstatus", false);
        this.$store.commit("changemapinit", false);
        // Bus.$emit("btnClicks", false);
      } else {
        this.$store.commit("changemapstatus", true);
        this.$store.commit("changemapinit", true);
        // Bus.$emit("btnClicks", true);
      }
      // console.log(item.value, item, "item.value, item");
      Bus.$emit(item.value, item);
      Bus.$emit("initlineandpoint", true);
      // this.$store.commit("changemapstatus", !item.isActive);
      this.$store.commit("changetoolbarshowhide", !item.isActive);
      // console.log("changetoolbarshowhide", !item.isActive);
      this.$store.commit("changemapshow", false);

      //设置管线点击弹框是否显示
      item.isActive && Bus.$emit("setGuanXianPopupHide");
      item.isActive && Bus.$emit("setToolBarStatus");
      !item.isActive && Bus.$emit("setGuanXianPopupShow");
      !item.isActive && Bus.$emit("setGuanXianToolBarItemActive", "gxPopup");
    },

    /**
     * 设置一级菜单类型，切换菜单
     * @param {*} item
     */
    doSetMenuType(item) {
      this.currentMenuType = item.key;
      //切换菜单时关闭功能项输入项弹框
      this.resetSubMenuStatus();
      Bus.$emit(this.GLOBAL.CLOSEMAINPOPUP);
    },

    /**
     * 重置二级菜单状态
     */
    resetSubMenuStatus() {
      this.menuList[this.currentMenuType][this.btntype].map((item, key) => {
        item.isActive = false;
        Bus.$emit(item.value, item);
        // this.$store.commit("changetoolbarshowhide", false);
        this.$store.commit("changemapinit", true);
        this.$store.commit("changemapshow", false);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.right-menu-con {
  width: 133px;
  position: absolute;
  right: 30px;
  top: 140px;
  z-index: 999;

  .menu-item {
    width: 133px;
    height: 49px;
    /* // background-image: url("@/assets/rightMenu/menu-bg-uncheck.png"); */
    display: flex;
    align-items: center;
    margin: 20px 0;
  }

  .span-active-text {
    color: #00baff;
  }

  span {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 38px;
    letter-spacing: 0px;
    color: #c9e9ff;
    /* margin-left: 22px; */
    width: inherit;
    text-align: end;
    padding-right: 56px;
  }
}
</style>
